<template>
  <a-space>
     <a-cascader :options="category"
                  v-model:value="cascaderValue"
                  @change="handleCascaderChange"
                  showSearch
                  change-on-select
                  placeholder="请选择分类"
                  :fieldNames="{ label: 'name', value: 'id', children: 'children' }">
              </a-cascader>
    <a-select placeholder="发布者" v-model:value="params.user_id" :style="width.sm" @change="handleChange" allowClear>
      <a-select-option :value="item.id" v-for="item in userList">{{ item.username }}</a-select-option>
    </a-select>
    <a-input-search placeholder="输入关键字搜索" name="keywords" v-model:value="params.keywords" @search="handleSearch" allowClear/>
    <a-dropdown placement="bottomRight">
      <a-button class="ant-btn-icon-only"><sort-ascending-outlined/></a-button>
      <template #overlay>
        <a-menu v-model:selectedKeys="selectedKeys" @click="handleSelect">
          <a-menu-item key="id"><field-number-outlined/> 最早发布 <arrow-up-outlined/></a-menu-item>
          <a-menu-item key="-id"><field-number-outlined/> 最近发布 <arrow-down-outlined/></a-menu-item>
          <a-menu-divider/>
          <a-menu-item key="views"><eye-outlined/> 访问量 <arrow-up-outlined/></a-menu-item>
          <a-menu-item key="-views"><eye-outlined/> 访问量 <arrow-down-outlined/></a-menu-item>
          <a-menu-divider/>
          <a-menu-item key="likes"><heart-outlined/> 点赞量<arrow-up-outlined/></a-menu-item>
          <a-menu-item key="-likes"><heart-outlined/> 点赞量 <arrow-down-outlined/></a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-space>
</template>

<script lang="ts" setup>
import {
  SortAscendingOutlined,
  FieldNumberOutlined,
  EyeOutlined,
  HeartOutlined,
  ArrowDownOutlined,
  ArrowUpOutlined
} from '@ant-design/icons-vue';
import { onMounted, reactive, ref} from 'vue';
import { width } from '@/config';
import useMessage from '@/hooks/useMessage';
import { getCategoryList } from '@/server/modules/category';
import { getSimpleUserList } from '@/server/modules/user';
type SimpleUserType = {
  id: number;
  username: string;
}

const emits = defineEmits(['change'])
const category = ref<Category[]>([{id:0,name:'全部分类'}])
const userList = ref<SimpleUserType[]>([{id:0,username:'全部用户'}])
const selectedKeys = ref<string[]>(['-id'])
const cascaderValue = ref<number[]>([])
const params = reactive<FilterParams>({
  user_id: 0,
  sort: '-id',
  keywords: '',
  category: 0,
})
const getCategories = async () => { 
  category.value = [...category.value,...await getCategoryList()]
}
const getUserList = async () => { 
  const res = await getSimpleUserList()
  if(res.code === 200&&res.data){
    userList.value = [...userList.value,...res.data]
  }
}
const handleSelect = ({key}:any) => { 
  selectedKeys.value = [key]
  params.sort = key
  emits('change',params)
}
const handleSearch = (value:string) => { 
  if(!value) return useMessage(400,'请输入搜索内容')
  params.keywords = value
  emits('change', params)
}
const handleChange = () => { 
  emits('change',params)
}
const handleCascaderChange = (value:[])=>{
  params.category = value[value.length-1]
  emits('change',params)
}
onMounted(() => { 
  getCategories()
  getUserList()
})
</script>

<style scoped>

</style>